.clearfix{
    content: "";
    clear: both;
    display: table;
}

a{
    text-decoration: none;
    color: #000;
}

.header{
    height: 142px;
    // background-color: #bfa;
    font-size: 18px;
}

// 设置顶部菜单容器样式
.top-menu{
    width: 1200px;
    height: 90px;
    line-height: 90px;
    margin: 0 auto;
    border-bottom: 1px solid rgba(201, 201, 201, .3);
    .logo, .menu, .menu li{
        float: left;
    }
}

// 设置logo的样式
.logo{
    // margin-top: 22px;
    margin-right: 20px;
    width: 170px;
    height: 90px;
    // background-color: #fff;
    float: left;
    img{
        // 这个还不理解
        vertical-align: middle;
        background-size: cover;
    }
    span{
        display: none;
    }
}

//设置中间菜单的样式
.menu{
    
    a{
        display: block;
        padding: 0 20px;
        &:hover{
            color: #31c27c;
        }
    }
    .active{
        a{
            color: #fff;
            background-color: #31c27c;
        }
    }

    //设置客户端上面的特权的样式
    .tequan{
        position: relative;
        img{
            width: 37.4px;
            height: 14px;
            position: absolute;
            top: 20px;
            right: 0;
        }

        // 设置客户端的下载体验样式
        .client{
            width: 160px;
            height: 130px;
            padding: 13px 0;
            font-size: 12px;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, .3);
            // 开启绝对定位,相对与父元素li.
            position: absolute;
            line-height: 30px;
            text-align:left;
            top: 70px;
            left: 20px;
            display: none;
            span{
                margin-left: 15px;
                display: block;
                i{
                    margin-right: 10px;
                    color: #31c27c;
                }
            }
            a{
                margin: 5px auto;
                width: 90px;
                text-align: center;
                color: #fff;
                border-radius: 13px;
                background-color: #31c27c;
            }
            a:hover{
                background-color: #19cf77;
            }
        }

        &:hover{
            .client{
                display: block;
                z-index: 999;
            }
        }
    }
}

// 底部右侧的菜单样式
.user-bar{
    // 搜索框样式
    .top-search{
        position: relative;
        
        float: left;
        margin-left: 50px;

		// 文本框样式
        input{
            margin: 0;
            padding: 0;
            border: 0;
            color: #c9c9c9;
            width: 176px;
            height: 36px;
            vertical-align: middle;
            border: 1px solid #c9c9c9;
            border-right: none;
        }
        // 文本框被选中之后,是由轮廓线显示,被选中状态
        input:focus{
            outline: none;
        }

        // 放大镜样式
        a{
            position: absolute;
            width: 38px;
            height: 36px;
            border: 1px solid #c9c9c9;
            border-left: none;
            top: 28px;
            left: 176px;
            i{
                position: absolute;
                color: #776b6b;
                top: 9px;
                left: 9px;
            }
        }
        a:hover{
            i{
                color: #31c27c;
            }
        }
    }

    // 右边用户登录和vip,充值样式
    .user-info{
        width: 263px;
        text-align: center;
        font-size: 16px;
        float: right;
        li{
            float: left;
        }
        .sign{
            width: 58px;
            a{
                display: block;
            }
            a:hover{
                
                color: #31c27c;
            }
        }

		// 开通vip的样式
        .vip-bar{
            width: 122px;
            font-size: 13px;
            position: relative;
            a{
                margin-right: 10px;
                padding: 12px 9px 12px 20px;
                color: #fff;
                background-color: #31c27c;
            //   border-radius: 4px;  
                i{
                    margin-left: 10px;
                    transition: .3s;
               }
           }
           .vip{
               width: 98px;
               height: 60px;
               line-height: 30px;
               font-size: 12px;
               background-color: aquamarine;
               display: none;
               position: absolute;
               top: 66px;
               left: 7px;
               a{
                   width: 96px;
                   display: block;
                   padding: 0;
                   text-align: center;
                   background-color: #fff;
                   border: 1px solid rgba(0, 0, 0, .3);
                   margin: -1px 0 0 0;
                   border-radius: 0;
                   color: #000;
               }
               a:hover{
                   color: #fff;
                background-color: #31c27c;
               }

           }
        }

		// 充值样式
        .money-bar{
            position: relative;
           width: 83px;
           font-size: 13px;
           a{
               padding: 12px 6px 12px 18px;
               border: 1px solid #c9c9c9;
               i{
                    margin-left: 10px;
                    transition: .3s;
               }
           }
           a:hover{
            background-color: #31c27c;
            }
            .money{
                height: 60px;
                line-height: 30px;
                font-size: 12px;
                background-color: aquamarine;
                display: none;
                position: absolute;
                top: 66px;
                left: 4.5px;
                a{
                    width: 72px;
                    display: block;
                    padding: 0;
                    text-align: center;
                    background-color: #fff;
                    border: 1px solid rgba(0, 0, 0, .3);
                    margin: -1px 0 0 0;
                    border-radius: 0;
                    color: #000;
                }
                a:hover{
                    color: #fff;
                 background-color: #31c27c;
                }
 
            }
        }

		// 显示下拉菜单
		.vip-bar:hover .vip,
        .money-bar:hover .money{
            display: block;
        }
		// 右边三角动画
		.vip-bar:hover i,
        .money-bar:hover i{
            transform: rotateZ(.5turn);
        }
    }
}

// 使用弹性盒子设置导航栏(兼容性不好，ie只能兼容ie11)
.nav-bar{
    width: 1200px;
    height: 51px;
    line-height: 51px;
    margin: 0 auto;
}
.top-nav{
    // 开启弹性容器
    display: flex;
    width: 800px;
    margin-left: 200px;
    // 设置排序方式
    justify-content:space-around;
    font-size: 15px;
    a:hover{
        color: #31c27c;
    }
}

.content-one-warpper{
	height: 532px;
	background-image: linear-gradient(#f1efef, #fff, #f1efef);
    overflow: hidden;
    position: relative;
}

// 主体样式
.content-one{
	width: 1200px;
	height: 532px;
	margin: 0 auto;
	// 设置内容标题样式（标题是一个雪碧图）
	.title{
		width: 1200px;
		height: 64px;
		padding-top: 50px;
		.title-img{
			width: 196px;
			height: 40px;
			margin: 0 auto;
			overflow: hidden;
		}
	}
	// 主体导航栏样式
	.content-nav{
		width: 510px;
		height: 50px;
		margin: 0 auto;
		font-size: 15px;
		// background-color: #fff;
		li{
			padding: 0 18px;
			float: left;
			a:hover{
				color: #31c27c;
			}
		}
		.active{
			a{
				color: #31c27c;
			}
		}
	}
	// 主体内容样式
	.content{

		li{
			float: left;
			width: 224px;
			height: 283px;
			// 设置下边距
			padding: 0 0  27px 0;
			font-size: 14px;
			background-color: #fff;
			img{
				width: 224px;
				transition: .5s;
			}
			a:not(.a-img){
				display: block;
				margin: 15px 0 10px 0;
			}
			a:hover{
				color: #31c27c;
			}
			// 透明和缩放实现
			.a-img{
				display: block;
				position: relative;
				overflow: hidden;
				.bofang{
					width: 35px;
					position: absolute;
					top: 95px;
					left: 95px;
					// 这个为照片透明度，0为透明；1为原图，范围（0 ~ 1）
					opacity: 0;
					transition: .5s;
				}
				// 透明加缩放，nb。
				&:hover .bofang{
					transform: scale(2,2);
					opacity: 1;
				}
				&:hover img:not(.bofang){
					transform: scale(1.1, 1.1);
					// 这个值会使照片变暗，100%为正常，0%为全黑，可以超过100%，这样会更亮
					filter: brightness(75%)
				}
			}
			span{
				color: #999;
			}
		}
		li:not(.last-img){
			margin-right: 20px;
		}
	}
	
	.point-wrapper{
		width: 1200px;
		height: 58px;
		position: relative;
	}
	// 轮播图的小点点
	.point{
		width: 84px;
		height: 38px;
		position: absolute;
		// background-color: #fff;
		top: 20px;
		left: 558px;
		li{
			float: left;
			a{
				display: block;
				width: 8px;
				height: 8px;
				margin: 0 10px;
				border-radius: 4px;
				background-color: rgba(201, 201, 201, .5);
			}
			a:hover{
				background-color: rgba(110, 102, 102, .5);
			}
		}
		.active{
			a{
				background-color: rgba(110, 102, 102, .5);
			}
		}
	}

}

// 右侧客户端样式
.download{
	width: 180px;
	height: 132px;
	background-color: #fff;
	box-shadow: 0 0 3px rgba(0, 0, 0, .3);
	text-align: center;
	font-size: 16px;
	position: fixed;
	top: 172px;
	// 给那边设置50%，就在那边的margin设置宽度
	left: 50%;
	margin-left: 720px;
    z-index: 999;
	img{
		margin-top: 15px;
		width: 100px;
	}
	span{
		color: #a6a6a6;
		margin: 10px 0 20px 0;
		display: block;
	}
	a{
		font-size: 14px;
		padding: 4px 20px;
		color: #fff;
		background-color: #31c27c;
		border-radius: 11px;
		// display: block;
		i{
			margin-right: 5px;
		}
	}
	a:hover{
		background-color: #19cf77;
	}
}

// 右侧反馈样式
.back-top-wrapper{
	width: 40px;
	height: 130px;
	text-align: center;
	position: fixed;
	top: 500px;
	left: 50%;
	margin-left: 860px;
    z-index: 999;
	div{
		line-height: 38px;
		width: 38px;
		height: 38px;
		border: 1px solid rgba(0, 0, 0, .3);
        background-color: #fff;
		margin-bottom: 3px;
		&:hover, a:hover{
			background-color: #e2e0e0;
		}
		.feedback:hover{
			color: #31c27c;
		}
	}
	i{
        // display: block;
		font-size: 20px;
	}
	span{
        display: block;
		font-size: 14px;
	}

	// 差一个媒体查询height，来决定返回顶部是否显示
	// @media screen {
		
	// }
}

// 箭头的基本样式
.left, .right{
    line-height: 108px;
    position: absolute;
    transition: .5s;
    a{
        display: block;
        width: 79px;
        height: 108px;
        background-color: #f1efef;
        position: relative;
        transition: .5s;
    }
    a:hover{
        background-color: rgba(201, 201, 201, .5);
    }
    .one, .two{
        display: block;
        width: 30px;
        height: 2px;
        background-color: black;
        position: absolute;
        left: 18px;
    }
    .one{
        top: 43px;
    }
    .two{
        bottom: 43px;
    }
}

// 绘制左箭头
.left{
    top: 212px;
    left: 0;
    margin-left: -79px;
    .one{
        transform: rotateZ(-45deg);
    }
    .two{
        transform: rotateZ(45deg);
    }
}
// 绘制右箭头
.right{
    top: 212px;
    right: 0;
    margin-right: -79px;
    .one{
        transform: rotateZ(45deg);
    }
    .two{
        transform: rotateZ(-45deg);
    }
}

// 触发显示，当鼠标移动到.content-one-wrapper上就会显示箭头
.content-one-warpper:hover .left{
    margin-left: 0;
}
.content-one-warpper:hover .right{
    margin-right: 0;
}

.footer{
    background-color: #333;
}

.footer-info{
    width: 1200px;
    padding: 0 0 45px 0;
    margin: 0 auto;
    font-size: 14px;
    text-align: center;
    // background-color: burlywood;
    h3{
        font-size: 15px;
        padding: 80px 0 30px 0;
        color: white;
    }
    ul{
        text-align: center;
        margin: 0 auto;
        li{
            float: left;
            a{
                color: white;
                padding: 5px 10px;
            }
        }
    }
}